<template>
  <div class="app">
    <div class="head">
      <div class="same">
        <h2>个人中心</h2>
        <div class="me" v-if="$store.state.token">
          <img
            :src="
              user.acatar_url === null
                ? 'https://tse1-mm.cn.bing.net/th/id/R-C.2ef794f96f679089ebb01f4ce6b2da87?rik=1Dqp8juCKh3rKw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20200303%2f18%2f1583232918-ilkpCfSLwK.jpeg&ehk=L8EDSWDAtKMlaIKW4ET9sSlFxqRTtGd9HmzNYqM52kw%3d&risl=&pid=ImgRaw&r=0'
                : user.acatar_url
            "
            alt=""
          />
          <p>{{ user.nickname }}</p>
          <router-link to="/SetUp"><i class="el-icon-setting"></i></router-link>
        </div>
        <div class="me" v-else>
          <img
            src="https://tse1-mm.cn.bing.net/th/id/R-C.2ef794f96f679089ebb01f4ce6b2da87?rik=1Dqp8juCKh3rKw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20200303%2f18%2f1583232918-ilkpCfSLwK.jpeg&ehk=L8EDSWDAtKMlaIKW4ET9sSlFxqRTtGd9HmzNYqM52kw%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
          <p>
            <span @click="$router.push('/enroll')">注册</span>/
            <span @click="$router.push('/login')">登录</span>
          </p>
        </div>
        <div class="order">
          <div class="same">
            <div class="bg">
              <div class="me_order1">
                <h3>我的订单</h3>
                <router-link :to="'/Order/' + 0"
                  ><p>全部订单<i class="el-icon-arrow-right"></i></p
                ></router-link>
              </div>
              <div class="me_order">
                <dl>
                  <router-link :to="'/Order/' + 0"
                    ><dt><i class="iconfon el-icon-document"></i></dt>
                    <dd>实物商品订单</dd></router-link
                  >
                </dl>
                <dl>
                  <router-link :to="'/Order/' + 1">
                    <dt>
                      <i class="iconfon iconfont icon-yiyuantianchong"></i>
                    </dt>
                    <dd>医疗服务订单</dd>
                  </router-link>
                </dl>
                <dl>
                  <router-link :to="'/Order/' + 2">
                    <dt><i class="iconfon el-icon-document"></i></dt>
                    <dd>到家服务订单</dd>
                  </router-link>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Pets" v-if="list.length == 0">
        <div class="same">
          <div class="Pets_samee til">
            <h3>我的宠物</h3>
          </div>
          <p class="addPets" v-if="$store.state.token">
            <router-link to="/pats"
              >添加宠物<i class="el-icon-plus"></i
            ></router-link>
          </p>
          <p
            class="addPets"
            v-if="!$store.state.token"
            @click="$router.push('/login')"
          >
            你还没有登录
          </p>
        </div>
      </div>
      <div class="Pets" v-else>
        <div class="same">
          <div class="Pets_same">
            <h3>我的宠物</h3>
            <router-link to="/pats"
              ><p>添加宠物<i class="el-icon-plus"></i></p
            ></router-link>
          </div>

          <div class="Pets_date">
            <div class="date_same">
              <div
                @click="open(item.idnumber)"
                class="Pets_xx"
                v-for="item in list"
                :key="item.idnumber"
              >
                <img
                  src="https://tse1-mm.cn.bing.net/th/id/R-C.2ef794f96f679089ebb01f4ce6b2da87?rik=1Dqp8juCKh3rKw&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20200303%2f18%2f1583232918-ilkpCfSLwK.jpeg&ehk=L8EDSWDAtKMlaIKW4ET9sSlFxqRTtGd9HmzNYqM52kw%3d&risl=&pid=ImgRaw&r=0"
                  alt=""
                />
                <div class="pp">
                  <p>
                    {{ item.petsname }}

                    <span v-if="item.petssex === 1">
                      <i class="el-icon-male"></i>
                    </span>
                    <span v-if="item.petssex === 2">
                      <i class="el-icon-female"></i>
                    </span>
                  </p>
                  <p>生日:{{ item.birthday.slice(0, -14) }}</p>
                </div>
              </div>

              <!-- <div class="Pets_xx">
                <img
                  src="https://img1.baidu.com/it/u=2788818474,2047444862&fm=26&fmt=auto"
                  alt=""
                />
                <p>勺子 <span>男孩子</span></p>
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <div class="tool">
        <div class="same">
          <div class="til">
            <span>工具服务</span>
          </div>
          <div class="box">
            <dl>
              <i class="el-icon-star-on"></i>
              <dt>我的收藏</dt>
            </dl>
            <dl>
              <router-link to="/Registerlist">
                <i class="el-icon-star-on"></i>
                <dt style="font-size: 16px">我的预约</dt></router-link
              >
            </dl>
            <dl>
              <i class="el-icon-star-on"></i>
              <dt>我的问诊</dt>
            </dl>
            <router-link to="/Address">
              <dl>
                <i class="el-icon-star-on"></i>
                <dt>收货地址</dt>
              </dl></router-link
            >
          </div>
        </div>
      </div>
    </div>
    <!-- {{us}} -->
  </div>
</template>
<script>
import { selectpet, deletepet } from "@/api";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      list: [],
      id: this.$store.state.user,
    };
  },
  mounted() {
    setTimeout(() => {
      this.selectpet();
    }, 500);
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    us() {
      if (this.$store.state.token == "") {
        this.list = [];
        this.$message({
          message: "您已经清空",
          type: "error",
        });
      }
      console.log(this.$store.state.user.id, "ididdidiididi");
    },
  },
  methods: {
    open(petid) {
      Dialog.confirm({
        title: "删除宠物",
        message: "您确定要移除您的爱宠吗？",
      })
        .then(() => {
          deletepet(petid).then((res) => {
            Toast("删除成功");
          });
        })
        .catch(() => {
          Toast("删除失败");
        });
    },
    selectpet() {
      if (this.$store.state.token === "") {
        this.list = "";
      } else {
        let id = this.$store.state.user.id;
        // console.log(id, "id");
        selectpet(id).then((res) => {
          // console.log(res, "hhhhh");
          this.list = res.data.data;
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  width: 100%;
  height: 100vh;
  background: #eeeeeecb;
  overflow: hidden;
}
.same h2 {
  text-align: center;
  font-weight: normal;
  font-size: 18px;
  margin-top: 2vh;
  margin-bottom: 2vh;
}
a {
  color: #333;
  font-size: 14px;
}
.me {
  margin-left: 5vw;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.me img {
  height: 8.5vh;
  border-radius: 50%;
}
.me p {
  width: 75vw;
  font-size: 18px;

  line-height: 10vh;
  margin-left: 5vw;
}
.bg {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.el-icon-setting {
  font-size: 16px;
  margin-right: 5vw;
}
.me_order1 {
  width: 95%;
  height: 8vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.me_order1 h3 {
  font-weight: normal;
  font-size: 18px;
}
.me_order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 95%;

  margin: 0 auto;

  height: 15vh;
}
.me_order dl {
  height: 10vh;
}
.me_order .iconfon {
  font-size: 40px;
}
.Pets {
  width: 100%;
  height: 20vh;
  margin-top: 2vh;
}
.Pets {
  width: 100%;
  .same {
    height: 20vh;
    background: rgb(255, 255, 255);
    border-radius: 10px;
  }
  .til {
    margin-left: 1vw;
  }
  .Pets_samee {
    display: flex;
    align-items: center;
    width: 100%;
    height: 8vh;
  }
  .addPets {
    width: 40vw;
    height: 6vh;
    border-radius: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 2vh;
    text-align: center;
    border: 1px solid #979797;
  }
}

.Pets_samee h3 {
  margin-left: 1vh;
  font-weight: normal;
  font-size: 18px;
}
.Pets {
  .Pets_same {
    height: 8vh;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin-left: 1vh;
      font-weight: normal;
      font-size: 18px;
    }
    p {
      font-size: 14px;
      margin-right: 2vw;
    }
  }
}
.Pets_date {
  width: 100%;
  overflow-y: hidden;
  .date_same {
    width: auto;
    display: flex;
    align-items: center;
    height: 10vh;
    .Pets_xx {
      background: #fff;
      width: 100%;
      height: 10vh;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        height: 8vh;
        border-radius: 50%;
        vertical-align: middle;
        margin: 0 3vw;
      }
      .pp {
        width: 50vw;
      }
    }
  }
}

.tool {
  width: 100%;
  margin-top: 5vw;
  .same {
    height: auto;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    overflow: hidden;

    .til {
      width: 100%;
      height: 7vh;
      display: flex;
      font-size: 18px;
      margin-left: 2vw;
      align-items: center;
    }
    .box {
      width: 100%;
      height: 15vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      dl {
        width: 24vw;
        height: 10vh;
        color: #333;
        text-align: center;
        i {
          display: block;
          font-size: 30px;
        }
      }
    }
  }
}
</style>
